/* Reset */
* { margin: 0;  box-sizing: border-box; }

:root{
  --bg:#f6f6f8;
  --card:#ffffff;
  --ink:#151515;
  --muted:#6b6b6b;
  --soft:#e9e9ee;
  --brandA:#0c74d0;
  --brandB:#f3c300;
  --brandC:#e23b3b;
  --brandD:#2fb35d;
  --brandE:#8b2bb1;
  --cta:#e23b3b;
  --ctaH:#c43333;
  --overlay:#0000008f;
}

/* Layout */
.lx-body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.lx-topbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #efefef;
  padding: 14px 12px;
}
.lx-topbar__title{ font-weight: 600; }

.lx-main{
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 16px;
  flex: 1; /* sticky footer */
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.lx-card{
  width: 100%;
  background: var(--card);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  padding: 16px 20px;
}

.lx-brand{ text-align: center; margin-bottom: 8px; }
.lx-brand__img{ width: 96px; height: auto; }

.lx-lead{
  text-align: center;
  margin: 0px auto 18px;
  max-width: 720px;
  line-height: 1.6;
  color: var(--ink);
}

.lx-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 6px;
}
@media (max-width: 840px){
  .lx-grid{ grid-template-columns: 1fr; }
}

.lx-label{
  font-size: 15px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.lx-meter{
  height: 20px;
  background: var(--soft);
  border-radius: 6px;
  display: flex;
  overflow: hidden;
}
.lx-meter__seg{ height: 100%; width: 0%; transition: width .8s ease; }
.lx-meter__seg--a{ background: var(--brandA); }
.lx-meter__seg--b{ background: var(--brandB); }
.lx-meter__seg--c{ background: var(--brandC); }
.lx-meter__seg--d{ background: var(--brandD); }
.lx-meter__seg--e{ background: var(--brandE); }

.lx-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  margin-bottom: 12px;
}
.lx-row--summary{
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #d7d7d7;
}
.lx-row__label{ font-weight: 600; }
.lx-row__status{ color: var(--muted); }
.lx-row__status--spin{ display: inline-block; }
.lx-row__status--done{ display: none; text-align: right; }

.lx-cta{
  margin-top: 8px;
  text-align: center;
}
.lx-cta p{
  margin: 8px 8px 20px 8px;
}
.lx-btn{
  background: var(--cta);
  color: #fff;
  border: 0;
  padding: 12px 22px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 18px;
  cursor: pointer;
}
.lx-btn:hover{ background: var(--ctaH); }

/* Footer */
.lx-footer{
  background: #d8d8d8;
  color: #000;
  margin-top: 300px;
  padding: 16px 0 28px;
}
.lx-footer__inner{
  max-width: 720px;
  margin: 0 auto;
  padding: 0 12px;
}
.lx-footer__inner p{
  font-size: 12px;
  color: #747474;
  text-align: center;
}
.lx-footer__link{
  color: #147de5;
  text-decoration: underline;
  cursor: pointer;
}

/* Modal */
.lx-modal__wrap{
  position: fixed;
  inset: 0;
  background: var(--overlay);
  display: grid;
  place-items: start center;
  padding-top: 80px;
  z-index: 9999;
}
.lx-hide{ display: none !important; }

.lx-modal {
  width: min(600px, 95vw);
  background: #fff;
  border-radius: 6px;
  color: #3b3b3b;
  overflow: hidden;
  display: flex;
  flex-direction: column; /* so header/body/footer stack */
  max-height: 75vh;       /* overall max height */
}

.lx-modal__head {
  padding: 12px 14px;
  flex: 0 0 auto;
}
.lx-modal__headin{
  display: flex;
  gap: 12px;
  align-items: center;
}
.lx-modal__icon{ width: 46px; height: 46px; }

.lx-modal__body {
  padding: 10px 16px;
  flex: 1 1 auto;          /* grow/shrink */
  overflow-y: auto;        /* scroll here */
}
.lx-modal__foot {
  padding: 10px 14px 14px;
  text-align: center;
  background: #fafafa;
  flex: 0 0 auto;
}
.lx-modal__btn{
  font-size: 17px;
  padding: .5rem 1rem;
  font-weight: 700;
  background: transparent;
  color: #0b7efb;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

/* Animations */
.lx-anim-in{ animation: lx-pop .45s ease; }
@keyframes lx-pop{
  from{ opacity: 0; transform: translateY(-24px); }
  to{ opacity: 1; transform: translateY(0); }
}